<template>
	<div style="height: 100%;width: 100%;padding: 10px 0px 0px;">
		<div style="height: 100%;width: 100%;background-color: #FFFFFF;">
			<div style="height: 40px;width: 100%;text-align: left;font-size: 14px;padding-left: 20px;font-weight: bold;" class="middle">列表</div>
			<div style="height: 60px;width: 100%;text-align: left;font-size: 14px;padding-left: 20px;" class="middle">
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
				  <el-form-item label="审批人">
				    <el-input v-model="formInline.user" placeholder="审批人"  size="mini"></el-input>
				  </el-form-item>
				  <el-form-item label="活动区域">
				    <el-select v-model="formInline.region" placeholder="活动区域" size="mini">
				      <el-option label="区域一" value="shanghai"></el-option>
				      <el-option label="区域二" value="beijing"></el-option>
				    </el-select>
				  </el-form-item>
				  <el-form-item label="审批人">
				    <el-input v-model="formInline.user" placeholder="审批人" size="mini"></el-input>
				  </el-form-item>
				  <el-form-item>
				    <el-button type="primary" @click="findList()" size="mini">查询</el-button>
				  </el-form-item>
				</el-form>
			</div>
			<div style="height: 60px;width: 100%;text-align: left;font-size: 14px;padding-left: 20px;" class="middle">
				<el-button type="primary" size="mini"  @click="update1()">新增</el-button>
				<el-button  size="mini">修改</el-button>
			</div>
			<div style="height: calc(100% - 160px);padding: 0 20px;">
				<div style="height: 85%;width: 100%;">
					<el-table :data="tableData" stripe border style="width: 100%" height="100%">
						<el-table-column type="index" label="序号" width="50"></el-table-column>
					    <el-table-column prop="csbssm" label="姓名" width=""></el-table-column>
						<el-table-column prop="csbs" label="姓名" width=""></el-table-column>
<!--						<el-table-column prop="cjr" label="创建人"width="" ></el-table-column>-->
<!--						<el-table-column prop="cjsj" label="创建时间" width=""></el-table-column>-->
						 <el-table-column prop="" label="操作" width="120">
							<template slot-scope="scope">
								<el-button size="small" @click="update(scope.row)"  type="text" v-if="scope.row.csbs">编辑</el-button>
								<el-button size="small"  type="text" @click="del(scope.row)">删除</el-button>
							</template>
						</el-table-column> 
					  </el-table>
				</div>
				<div style="height: 15%;width: 100%;">
					<div class="pageIn">
						<el-pagination
							  @size-change="handleSizeChange"
							  @current-change="handleCurrentChange"
							  :current-page="currentPage"
							  :page-sizes="[100, 200, 300, 400]"
							  :page-size="100"
							  layout="total, sizes, prev, pager, next, jumper"
							  :total="400">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
		<DashboardAdd ref="dashboard" @getlist="findList()"></DashboardAdd>
	</div>
</template>

<script>
	import  {findList} from '@/api/user.js'
	import DashboardAdd from "./dashboardAdd";
	export default{
		data(){
			return{
				formInline: {
				     user: '',
				     region: ''
				},
				currentPage:1,
				tableData: [],
			}
		},
		components:{
			DashboardAdd
		},

		mounted() {
			this.findList()
		},
		methods:{
			update(row){
				this.$refs['dashboard'].input = row.csbs
				this.$refs['dashboard'].value = '选项1'
				this.$refs['dashboard'].show()
			},
			update1(){
				this.$refs['dashboard'].show();
			},
			del(row){
				let id = row.id;



				let parms ={
					id:id,
				}
				findList(parms);
			},


			async findList(){
				let parms ={
					user:this.formInline.user,
					region:this.formInline.region,
					page:this.currentPage
				}
				let data = await findList(parms)
				console.log(data.content);
				this.tableData=data.content
			},
			// 跳转路由
			go(){
				this.$router.push('/dashboard2')
			},
			onSubmit() {
				console.log('submit!');
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
		    },
		    handleCurrentChange(val) {
				this.currentPage = val,
			  console.log(`当前页: ${val}`);
		    },
		},

	}
</script>

<style scoped="scoped">
.pageIn{
 	height: 100%;
 	width: 50%;
 	display:flex;
 	text-align: right;
 	align-items:center;
 	line-height: 100%;
 	float: right;
 }
</style>
